<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 左右布局,方式1-栅格系统 -->
        <!-- <el-row>
          <el-col :span="12">111</el-col>
          <el-col :span="12">222</el-col>
          </el-row> -->
        <!-- 左右布局,方式2-flex 推荐 在element文档的layout中查看 -->
        <!-- <el-row type="flex">
          <el-col>左</el-col>
          <el-col>右</el-col>
          </el-row> -->
        <TreeTool :data="company">
          <el-dropdown-item>添加子部门</el-dropdown-item>
        </TreeTool>
        <el-tree :data="list" :props="{ label: 'name' }" default-expand-all>
          <!-- 树形控件部分 element上面 -->
          <template v-slot="{ data }">
            <tree-tool :data="data">
              <!-- .native 相当于冒泡 -->
              <!-- <el-dropdown-item
                v-if="$store.getters.points.includes('add-dept')"
                @click.native="onAdd(data)"
              >添加子部门</el-dropdown-item> -->
              <!-- 用全局方法进行调用 在main.js中写 -->
              <el-dropdown-item
                v-if="hasPerm('add-dept')"
                @click.native="onAdd(data)"
              >添加子部门</el-dropdown-item>
              <el-dropdown-item
                @click.native="onEdit(data)"
              >编辑部门</el-dropdown-item>
              <el-dropdown-item
                @click.native="onDel(data.id)"
              >删除部门</el-dropdown-item>
            </tree-tool>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 使用组件 -->
    <!-- <add-dept :visible="showDialog" @visible="showDialog = $event"></add-dept> -->
    <!-- 语法糖 .sync修饰符 简化父组件的模板 只要传数据 -->
    <!--  将当前的操作的节点传递给子组件 current-node -->
    <add-dept
      ref="addDeptRef"
      :visible.sync="showDialog"
      :node="currentNode"
      @success="getList()"
    ></add-dept>
  </div>
</template>

<script>
import TreeTool from './components/tree-tool.vue'
import { delDept, getList, getDeptById } from '../../api/departments.js'
import { translateListToTree } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Department',
  components: { TreeTool, AddDept },
  props: {},
  data() {
    return {
      loading: false, // 因为发请求很慢 所以增加一个loading
      showDialog: false, // 控制弹出层显示
      company: { name: '', manager: '负责人' },
      list: [],
      currentNode: {} // 当前操作的部门节点
    }
  },
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    async getList() {
      // 发请求前将loading设置为加载中
      this.loadinig = true
      const { companyName, depts } = await getList()
      this.company.name = companyName
      this.list = translateListToTree(depts, '') // 使用工具里面数据扁平化的方法 通过alt+/ 自动引入方法
      // 上面转成树形方法里面形参'' 表示根节点
      this.loading = false
      // 请求结束之后将loading设置为关闭加载
    },
    onAdd(node) {
      console.log('添加')
      this.showDialog = true
      this.currentNode = node
    },
    async onEdit(node) {
      this.currentNode = node
      console.log('编辑')
      // 1. 打开弹出层
      this.showDialog = true
      // 2. 获取数据
      // 获取数据通过ref给子组件传数据
      this.$refs.AddDeptRef.form = await getDeptById(node.id)
    },
    onDel(id) {
      console.log('删除', id)
      // 1. 确认删除  通过代码片段elmecon
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '是的',
        cancelButtonText: '不是',
        type: 'warning'
      }).then(async action => {
        // 2. 发请求
        await delDept(id)
        // 3. 提示成功
        this.$message.success('操作成功')
        // 4. 刷新
        this.getList()
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>
